<template>
  <div class="face-record-container d-flex flex-column">
    <div class="header d-flex jc-between ai-center">
      <el-form :model="formData" inline>
        <el-form-item :label="$t('zhuapaijilu.shaixuantiaojian')">
          <MyDatePicker v-model="formData.start_time"> </MyDatePicker>
        </el-form-item>
        <el-form-item :label="$t('zhuapaijilu.zhi')">
          <MyDatePicker v-model="formData.stop_time"> </MyDatePicker>
        </el-form-item>
        <el-form-item>
          <CameraSelect v-model="formData.channel" :multiple="false" hasAll />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.alarm_type">
            <el-option
              v-for="item in behavior_alarm_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <MyButton className="confirm" @click="search">{{
            $t("common.confirm")
          }}</MyButton>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <!-- 全部导出 -->
        <MyButton
          icon="el-icon-download"
          className="export"
          @click="handleExportAll"
          >{{ $t("common.allExport") }}</MyButton
        >
        <!-- 导出 -->
        <MyButton
          icon="el-icon-download"
          className="export"
          @click="handleExport"
          >{{ $t("common.export") }}</MyButton
        >
        <!-- 批量删除 -->
        <MyButton
          @click="handleDeleteMultiple"
          icon="el-icon-delete"
          className="delete"
          >{{ $t("common.multipleDelete") }}</MyButton
        >
        <!-- 全选 -->
        <el-checkbox
          border
          class="select-all"
          v-model="checkedAll"
          :indeterminate="isIndeterminate"
          @change="handleSelectAll"
          >{{ $t("common.selectAll") }}</el-checkbox
        >
      </div>
    </div>
    <div class="content flex-1 d-flex flex-column jc-start ai-start">
      <div class="card-wrapper flex-1 d-flex">
        <Card
          class="mr-20 mb-20"
          v-for="(item, index) in cardList"
          :key="index"
          :cardData="item"
          @click.native="handleSelect(item)"
          @dblclick.native="handleShowDetail(item)"
        />
        <NoData v-if="cardList.length === 0" />
      </div>
      <Pagination
        v-show="total_num > 10"
        :total="total_num"
        :page.sync="pageNumber"
        :limit.sync="qry_len"
        @pagination="getData()"
      />
    </div>

    <MultipleExportDialog
      :zippasswd="zippasswd"
      :num="total_num"
      @confirm="confirmBatch"
      @cancel="cancelBatch"
      :visible.sync="isBatchExportShow"
      :step="batchStep"
    />
    <SingleExportDialog
      :zippasswd.sync="zippasswd"
      @confirm="confirmSingle"
      @cancel="cancelSingle"
      :visible.sync="isSingleExportShow"
      :step="singleStep"
    />
    <Detail :row="row" :visible.sync="isDetailShow" />
  </div>
</template>

<script>
import Card from "./WarnCard.vue";
import Detail from "./Detail";
import {
  getList,
  exportSingle,
  exportBatch,
  deleteRecord,
  getDetail,
} from "./service";
import { behavior_alarm_type_list } from "@/utils/CONSTANT";
import operateAction from "../mixins/operate";
export default {
  components: {
    Card,
    Detail,
  },
  mixins: [operateAction],
  data() {
    return {
      exportBatch,
      exportSingle,
      getList,
      deleteRecord,
      behavior_alarm_type_list: [
        { label: this.$t("allAlarmType"), value: void 0 },
        ...behavior_alarm_type_list,
      ],
    };
  },
  methods: {
    async handleShowDetail(item) {
      if (item.detail_type === 0) {
        return;
      }
      const params = {
        snap_id: item.snap_id,
        first_alarm_type: item.first_alarm_type,
      };
      const res = await getDetail(params);
      this.isDetailShow = true;
      this.row = [...res.data.record];
    },
  },
};
</script>

<style lang="less" scoped>
.face-record-container {
  height: 100%;
  .header {
    width: 100%;
    .btn-group {
      height: 100%;
    }
    /deep/ .el-input {
      width: 145px;
    }
  }
}
.content {
  width: 100%;
}
</style>
